<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery.2.1.1.min.js"></script>
    <script type="text/javascript" src="XQ_drag.js"></script>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            padding: 30px;
            background-color:#E9E9E9
        }
        .drop{
            width: 400px;
            min-height: 100px;
            display: block;
            border: 1px solid #036BB5;
            padding: 10px;
        }
        .drag{
            /*width: 100%;*/
            height: 40px;
            /*overflow: hidden;*/
            display: inline-block;
            margin-right: 10px;
            text-align: center;
        }
        .drag>span{
            color:#000;
            font-weight: bold;
            background: #fff;
            padding:5px;
            border-radius: 3px;
        }
        /*.drag img{*/
            /*width: 100%;*/
            /*height: 100%;*/
        /*}*/
    </style>
</head>
<body>
    <div class="drop" xq_drop="true" style="background:#8CDDFF">
        <div class="drag" xq_drag="true" id="1">
           <span>task title</span>
        </div>
        <div class="drag" xq_drag="true" id="2">
            <span>detail content</span>
        </div>
        <div class="drag" xq_drag="true" id="3">
           <span>start time</span>
        </div>
        <div class="drag" xq_drag="true" id="4">
           <span>deadline</span>
        </div>
        <div class="drag" xq_drag="true" id="5">
            <span>number of participantors</span>
        </div>
        <div class="drag" xq_drag="true" id="6">
            <span>reward</span>
        </div>
        <div class="drag" xq_drag="true" id="7">
           <span>need check</span>
        </div>
        <div class="drag" xq_drag="true" id="8">
            <span>location</span>
        </div>
        <div class="drag" xq_drag="true" id="9">
            <span>duration</span>
        </div>
    </div>

    <div  class="drop" xq_drop="true" style="background:#2AC0FF" id="input1">
    </div>

    <div  class="drop" xq_drop="true" style="background:#2490E9" id="input2">
    </div>

    <input type="button" value="check" onclick="getInput()" style="width:100px;height:30px"/>
</body>
</html>